<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">
    <title>数字尾巴 | 分享美好数字生活</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3027260_c1pt3aybfaj.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/tabs.css">
    <link rel="stylesheet" href="./css/news.css">
    <meta name="referrer" content="no-referrer">
</head>

<body>
    <div class="content">
        <div class="nav_bg">
            <header>
                <div class="logo_img">
                    <img src=""
                        alt="">
                </div>
                <a href="#">
                    下载 APP
                </a>
                <div class="search">
                    <i class="iconfont icon-sousuoleimu"></i>
                </div>
            </header>
        </div>

    </div>
    <div class="switch">
        <div class="header_search">
            <div class="search_ipt">
                <i class="iconfont icon-search-copy"></i>
                <input type="text" placeholder="iPhone X">
            </div>
            <div class="header_close">
                <i class="iconfont icon-error"></i>
            </div>
        </div>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./comment.html">
                    <img src="./img/comment.png" alt="">
                    <p>点评</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./article.html">
                    <img src="./img/article.png" alt="">
                    <p>文章</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./news.html">
                    <img src="./img/news.png" alt="">
                    <p>鲸闻</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./evaluating.html">
                    <img src="./img/test.png" alt="">
                    <p>众测</p>
                </a>
            </li>
        </ul>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./activity.html">
                    <img src="./img/activity.png" alt="">
                    <p>活动</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./aside.html">
                    <img src="./img/lie.png" alt="">
                    <p>闲置</p>
                </a>
            </li>
            <li class="header-module">
                <a href="">
                    <img src="./img/recycling.png" alt="">
                    <p>手机回收</p>
                </a>
            </li>
            <li class="header-module">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <div class="line"></div>
        <div class="header_login">
            <a href="">登录</a>
        </div>
    </div>
    <div class="all">
        <div class="tab">
            <div class="tab_tittle">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide tabActive">全部</div>
                        <div class="swiper-slide">直播</div>
                        <div class="swiper-slide">资讯</div>
                        <div class="swiper-slide">每日一言</div>
                    </div>
                </div>
            </div>
            <div class="chose_title">
                <i class="iconfont icon-diandiandian"></i></div>
            <div class="clickShowBox none">
                <div class="clickPopup_box">
                    <i class="iconfont icon-error p_x"></i>
                    <h3 class="clickPopup_title">分类</h3>
                    <ul class="clickPopup_lable">
                        <li><span class="">直播</span></li>
                        <li><span class="">资讯</span></li>
                        <li><span class="">每日一言</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="p_content">
            <div class="newsletterBar">
                <div class="block_top">
                    <div class="block_top_left">
                        <img src="http://s1.dgtle.com/dgtle_img/news/2022/01/12/d6835202201121317079250_1800_500.jpeg?imageView2/2/w/960/q/100/format/jpg" alt="" class="block_inner_img"></div>
                    <div class="block_top_right">
                        <div class="block_top_right_title">
                            卷起来了，小牛创始人李一男造车：小牛变大牛
                        </div>
                        <div class="block_top_right_bottom">小牛电动创始人李一男的履历可以说相当丰富，最近李一男也要...</div>
                    </div>
                </div>
                <div class="block_bottom">
                    <img src=""
                        alt="" class="like">
                    <span class="like_total">32</span>
                    <img src=""
                        alt="" class="talk">
                    <span class="msg_total">14</span>
                    <span class="block_bottom_time">4小时前&nbsp;·&nbsp;资讯</span></div>
            </div>
            <div class="live">
                <ul class="liveList">
                    <li>
                        <div class="bgImg">
                            <div>
                                <div class="liveStatus end">
                                    <span></span>
                                    <p>直播结束</p>
                                </div>
                                <div class="content">
                                    <p class="title">魅族新生力量冬季新品发布会</p>
                                    <p class="otherInfo">于 1 月 12 日结束</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="dailyItem">
                <div class="WapDailyBar">
                    <div class="DailyBar_box">
                        <a href="javascript:;" class="DailyBar_box_a">
                            <img src="http://s1.dgtle.com/dgtle_img/news/2022/01/12/d2b53202201120939417754_1800_500.jpeg?imageView2/2/w/600/q/100/format/jpg" alt="" class="DailyBar_box_img"></a>
                        <div class="DailyBar_box_mask"></div>
                        <div class="DailyBar_box_text">
                            <div class="DailyBar_box_text_top">
                                <span class="DailyBar_box_day">12</span>
                                <div class="DailyBar_box_time">
                                    <p class="DailyBar_box_time_month">JAN</p>
                                    <p class="DailyBar_box_time_year">2022</p>
                                </div>
                            </div>
                            <div class="DailyBar_box_content_wrap">
                                <div class="DailyBar_box_content_cell">
                                    <div class="DailyBar_box_content_word">今年华为可以支撑起 30 万台汽车销售目标</div>
                                </div>
                            </div>
                            <p class="DailyBar_author"><span class="DailyBar_author_line"></span> 华为消费者业务 CEO：余承东
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p_content none">

        </div>
        <div class="p_content none">

        </div>
        <div class="p_content none">
            <div class="dailyItem">
                <div class="WapDailyBar">
                    <div class="DailyBar_box">
                        <a href="javascript:;" class="DailyBar_box_a">
                            <img src="http://s1.dgtle.com/dgtle_img/news/2022/01/12/d2b53202201120939417754_1800_500.jpeg?imageView2/2/w/600/q/100/format/jpg" alt="" class="DailyBar_box_img"></a>
                        <div class="DailyBar_box_mask"></div>
                        <div class="DailyBar_box_text">
                            <div class="DailyBar_box_text_top">
                                <span class="DailyBar_box_day">12</span>
                                <div class="DailyBar_box_time">
                                    <p class="DailyBar_box_time_month">JAN</p>
                                    <p class="DailyBar_box_time_year">2022</p>
                                </div>
                            </div>
                            <div class="DailyBar_box_content_wrap">
                                <div class="DailyBar_box_content_cell">
                                    <div class="DailyBar_box_content_word">今年华为可以支撑起 30 万台汽车销售目标</div>
                                </div>
                            </div>
                            <p class="DailyBar_author"><span class="DailyBar_author_line"></span> 华为消费者业务 CEO：余承东
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="app">
        <div class="openInApp">APP内打开</div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/font-size.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="baseurl.js"></script>

    <script>
        window.onload = () => {
                let nowChose = document.querySelectorAll('.p_content')
                myput("/news", {
                    flag: 0
                }).then(res => {
                    let str = ''
                    res.data.data.forEach((item, index) => {
                        str += `
                                <div class="newsletterBar">
                                    <div class="block_top">
                                        <div class="block_top_left">
                                            <img src="${item.img}" alt="" class="block_inner_img"></div>
                                        <div class="block_top_right">
                                            <div class="block_top_right_title">
                                                ${item.publish_tittle}
                                            </div>
                                            <div class="block_top_right_bottom">${item.publish_text}</div>
                                        </div>
                                    </div>
                                    <div class="block_bottom">
                                        <img src=""
                                            alt="" class="like">
                                        <span class="like_total">${item.like}</span>
                                        <img src=""
                                            alt="" class="talk">
                                        <span class="msg_total">${item.talk}</span>
                                        <span class="block_bottom_time">${item.publish_time}</span></div>
                                </div>
                            `
                    })
                    nowChose[0].innerHTML = str
                }).catch(err => {
                    console.log(err);
                })
            }
            // 选择改变
        var tabChange = () => {
                let flag = 0
                let nowChose = document.querySelectorAll('.p_content')
                    // 获取当前选中板块
                nowChose.forEach((item, index) => {
                        if (item.classList.value == 'p_content') {
                            flag = index
                        }
                    })
                    // 大标题改变 
                document.querySelectorAll('.tab_tittle .swiper-slide').forEach((item, index) => {
                        index == flag ? item.classList.add('tabActive') : item.classList.remove('tabActive')
                    })
                    // 菜单标题改变
                let menu = document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                    index == flag - 1 ? item.classList.add('sortActive') : item.classList.remove('sortActive')
                })
                myput("/news", {
                    flag
                }).then(res => {
                    let str = ''
                    console.log(res.data.data);
                    res.data.data.forEach((item, index) => {
                        if (flag == 1) {
                            str += `
                                <div class="live">
                                    <ul class="liveList">
                                        <li style="background-image: url(${item.img})">
                                            <div class="bgImg">
                                                <div>
                                                    <div class="liveStatus end">
                                                        <span></span>
                                                        <p>${item.status}</p>
                                                    </div>
                                                    <div class="content">
                                                        <p class="title">${item.tittle}</p>
                                                        <p class="otherInfo">${item.time}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                          `
                        } else if (flag == 2 || flag == 0) {
                            str += `
                                <div class="newsletterBar">
                                    <div class="block_top">
                                        <div class="block_top_left">
                                            <img src="${item.img}" alt="" class="block_inner_img"></div>
                                        <div class="block_top_right">
                                            <div class="block_top_right_title">
                                                ${item.publish_tittle}
                                            </div>
                                            <div class="block_top_right_bottom">${item.publish_text}</div>
                                        </div>
                                    </div>
                                    <div class="block_bottom">
                                        <img src=""
                                            alt="" class="like">
                                        <span class="like_total">${item.like}</span>
                                        <img src=""
                                            alt="" class="talk">
                                        <span class="msg_total">${item.talk}</span>
                                        <span class="block_bottom_time">${item.publish_time}</span></div>
                                </div>
                            `
                        } else if (flag == 3) {
                            str += `
                                <div class="dailyItem">
                                    <div class="WapDailyBar">
                                        <div class="DailyBar_box">
                                            <a href="javascript:;" class="DailyBar_box_a">
                                                <img src="${item.img}" alt="" class="DailyBar_box_img"></a>
                                            <div class="DailyBar_box_mask"></div>
                                            <div class="DailyBar_box_text">
                                                <div class="DailyBar_box_text_top">
                                                    <span class="DailyBar_box_day">${item.day}</span>
                                                    <div class="DailyBar_box_time">
                                                        <p class="DailyBar_box_time_month">${item.month}</p>
                                                        <p class="DailyBar_box_time_year">${item.year}</p>
                                                    </div>
                                                </div>
                                                <div class="DailyBar_box_content_wrap">
                                                    <div class="DailyBar_box_content_cell">
                                                        <div class="DailyBar_box_content_word">${item.title}</div>
                                                    </div>
                                                </div>
                                                <p class="DailyBar_author"><span class="DailyBar_author_line"></span>${item.from}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `
                        }
                    })
                    nowChose[flag].innerHTML = str
                }).catch(err => {
                    console.log(err);
                })
            }
            // 菜单框选择
        document.querySelectorAll('.sort_ul li').forEach((item, index) => {
            item.onclick = () => {
                let flag = 0;
                document.querySelectorAll('.sort_ul li').forEach(item => {
                    item.classList.remove('sortActive')
                    flag = index
                })
                item.classList.add('sortActive')
                    // 遍历内容隐藏和显示
                document.querySelectorAll('.p_content').forEach(item => {
                    item.classList.add('none')
                })
                document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                    item.classList.remove('sortActive')
                })
                document.querySelectorAll('.p_content')[flag].classList.remove('none')
                document.querySelector('.clickShowBox').classList.add('none')
                tabChange()
            }
        })
        document.querySelectorAll('.clickPopup_lable li span').forEach((item, index) => {
                item.onclick = () => {
                    let flag = 0;
                    document.querySelectorAll('.clickPopup_lable li span').forEach(item => {
                        item.classList.remove('sortActive')
                        flag = index + 1
                    })
                    item.classList.add('sortActive')
                        // 遍历内容隐藏和显示
                    document.querySelectorAll('.p_content').forEach(item => {
                        item.classList.add('none')
                    })
                    document.querySelectorAll('.p_content')[flag].classList.remove('none')
                    document.querySelector('.clickShowBox').classList.add('none')
                    tabChange()
                }
            })
            //tab标题切换
        var tab_title = document.querySelectorAll('.tab_tittle .swiper-slide')
        tab_title.forEach((item, index) => {
            item.onclick = () => {
                let flag = 0
                tab_title.forEach(item => {
                    item.classList.remove('tabActive')
                })
                item.classList.add('tabActive')
                flag = index
                document.querySelectorAll('.p_content').forEach(item => {
                    item.classList.add('none')
                })
                document.querySelectorAll('.p_content')[flag].classList.remove('none')
                tabChange()

            }
        })

        // 点击排序菜单
        var point9 = document.querySelector('.icon-diandiandian')
        var ShowBox = document.querySelector('.clickShowBox')
        point9.onclick = () => {
            ShowBox.classList.remove('none')
        }
        document.querySelector('.p_x').onclick = () => {
                ShowBox.classList.add('none')
            }
            // 顶部tab切换
        var swiper = new Swiper(".swiper", {
            slidesPerView: 3.7,
            spaceBetween: 0,
            freeMode: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });


        // 搜索切换
        $('.search').click(() => {
            $('.content').css({
                'display': ' none'
            })
            $('.switch').css({
                'display': 'block'
            })
            $('body').css({
                'background': '#fff'
            })
            document.querySelector('.all').classList.add('none')
        })
        $('.header_close').click(() => {
            $('.content').css({
                'display': ' block'
            })
            $('.switch').css({
                'display': 'none'
            })
            $('body').css({
                'background': '#f5f5f5'
            })
            document.querySelector('.all').classList.remove('none')
        })
        document.querySelector('.content .logo_img').onclick = () => {
            location.href = 'index.html'
        }
    </script>
</body>

</html>